<template>
	<view class="contain">
		<view class="bg"></view>
		<navigationTop isBack="true" toFrom="站点选择"></navigationTop>
		<view class="search">
			<image src="../../static/img/icon-Search.png" mode="widthFix"></image>
			<input placeholder="请输入你想抵达的城市" placeholder-class="placeholder"/>
		</view>

		<view class="pattern">
			<view class="patternName" v-for="item in pattern" :key="item.id" @click="handlePattern(item.id)"
				:style="{color:patternActive===item.id?'#EB6A58':'#545454'}">{{item.name}}</view>
		</view>

		<view class="intercity" v-show="patternActive==0">
			<view class="intercitySiteBox">
				<view class="intercitySite" v-for="item in intercitySite" :key="item.id"
					@tap="handleintercitySite(item.id); selectCity(item.name);"
					:style="{background:intercitySiteActive ===item.id?'#F7C269':'#FAFAFA'}">{{item.name}}</view>
			</view>
		</view>

		<view v-show="patternActive==1" class="transCity">
			<view class="currentCity">
				<view>当前城市</view>
				<view class="currentCityImg">
					<image src="../../static/img/icon-choice Location.png" mode="widthFix"></image>
					潮州
				</view>
			</view>

			<view class="currentCity">
				<view>上次选择</view>
				<view class="currentCityBox">
					<view class="currentCityImg" v-for="item in historyCity" :key="item.id"
						@tap="selectCity(item.name)">{{item.name}}</view>
				</view>
			</view>

			<view class="cityList" v-for="item in cityList" :key="item.letter">
				<view style="margin-left: 32rpx; margin-bottom: 4rpx;">{{item.letter}}</view>
				<view class="cityListBox" v-for="city in item.city" :key="city.id">
					<view class="cityListItem" @tap="selectCity(city.name)">{{city.name}}</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import navigationTop from '../../components/navigationTop/navigationTop.vue'
	import {
		cityList
	} from "../../assets/cityList.json"
	export default {
		data() {
			return {
				pattern: [{
						id: 0,
						name: "城际"
					},
					{
						id: 1,
						name: "跨市"
					},
				],
				patternActive: 1,
				intercitySiteActive: 1,
				intercitySite: [{
						id: 0,
						name: "潮州站"
					},
					{
						id: 1,
						name: "潮汕站"
					},
					{
						id: 2,
						name: "揭阳机场"
					},
					{
						id: 3,
						name: "汕头站"
					},
				],
				cityList,
				historyCity: [{
						"id": 0,
						"name": "潮州市"
					},
					{
						"id": 1,
						"name": "东莞市"
					},
					{
						"id": 2,
						"name": "佛山市"
					},
					{
						"id": 3,
						"name": "广州市"
					}
				]
			}
		},
		components: {
			navigationTop
		},
		methods: {
			// 选项卡
			handlePattern(id) {
				this.patternActive = id

			},
			handleintercitySite(id) {
				this.intercitySiteActive = id
			},
			// 选择好城市
			selectCity(city) {
				uni.setStorageSync('city', city)
				uni.switchTab({
					url: '/pages/index/index'
				})
			}

		},
		mounted() {
			this.cityList = cityList
		}
	}
</script>

<style lang="scss">
	.contain {
		
		.placeholder{
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #989898;
		}
		.bg {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: #f1f1f1;
			z-index: -1;
		}

		.search {
			width: 660rpx;
			height: 68rpx;
			border-radius: 68rpx;
			border: 2rpx solid #EB6A58;
			margin: 20rpx auto;
			display: flex;
			align-items: center;

			image {
				width: 48rpx;
				margin-left: 32rpx;
				margin-right: 8rpx;
			}

			input {
				width: 80%;
			}
		}

		.pattern {
			width: 100%;
			height: 88rpx;
			background: #FAFAFA;
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 36rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;

			.patternName {
				width: 50%;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
		}

		.intercity {
			.intercitySiteBox {
				display: flex;
				flex-wrap: wrap;
				margin: 32rpx;
				justify-content: space-between;

				.intercitySite {
					width: 200rpx;
					height: 88rpx;
					background: #FAFAFA;
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 32rpx;
				}
			}
		}

		.transCity {
			margin-top: 24rpx;

			.currentCity {
				margin-bottom: 24rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				margin-left: 32rpx;
				color: #545454;

				.currentCityImg {
					margin-top: 12rpx;
					width: 200rpx;
					height: 88rpx;
					background: #FAFAFA;
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold;
					color: #333333;
					font-size: 36rpx;

					image {
						width: 48rpx;
					}
				}

				.currentCityBox {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					margin-right: 32rpx;

					view {
						margin-bottom: 12rpx;
					}
				}

			}

			.cityList {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #545454;

				.cityListBox {
					height: 78rpx;
					background: #FAFAFA;
					padding-left: 44rpx;
					font-size: 32rpx;
					color: #000000;
					line-height: 78rpx;
					margin-bottom: 12rpx;
				}
			}
		}
	}
</style>
